<style media="screen">
  .head-container{
    position: relative;
    padding: 10px 0 14px;
  }
  .head-container .mes{
    margin-right: 10px;
    float: left;
  }
  .head-container .mes p{
    font-size: 12px;
    color:#CFCFCF;
    margin-bottom: 6px;
  }
  .head-container .mes input{
    width: 220px;
    height: 34px;
  }
  .head-container .flow{
    float: left;
    margin-right: 10px;
  }
  .head-container .flow p{
    font-size: 12px;
    color:#CFCFCF;
    margin-bottom: 6px;
  }
  .head-container .flow .flow-select{
    width: 140px;
    height: 34px;
  }
  .head-container .button-group{
    padding-top: 23px;
  }
</style>

<section id="workingGroup">
  <hl-page-header title="工作组配置">
    <hl-button type="outline" @on-click="addGroup" v-if="addFlag" class="add-group">新增组</hl-button>
  </hl-page-header>

  <div class="head-container clearfix">
    <div class="clearfix">
      <div class="flow">
        <p>信息检索</p>
        <div class="global_search wg-sea-box">
          <span class="icon-Gm-search"></span>
          <input
            autocomplete="off"
            type="text"
            class="global_ipt_text"
            placeholder="负责人/联系方式"
            v-model="params.keyword"
            @input="onInputDJR"
            style="width:200px"
           />
           <ul class="append-temp absolute bg-fff border z-998 line-height-34" style="position: absolute;left:0; top:35px; max-height:200px; overflow-y:scroll; width: 100%; text-indent:0.8em;" v-if="rperson.list.length > 0">
             <li v-for="item in rperson.list" :key="item.userId" class="clearfix" @click="setRperson(item.name)">
               <i class="pull-left">{{item.name}}</i>
               <i class="pull-right mr-5">{{item.phone}}</i>
             </li>
           </ul>
        </div>

      </div>

      <div class="button-group">
        <hl-button @on-click="search" size="mini">查询</hl-button>
        <hl-button @on-click="resetButton" size="mini">重置</hl-button>
      </div>
    </div>
  </div>

  <div class="wg-list-wrap br-4 global_table" style="border:1px solid #E5E5E5">
    <div class="wg-list-head dy-flex global_table_title">
      <div class="dy-fx-1">序</div>
      <div class="dy-fx-3">工作组</div>
      <div class="dy-fx-3">负责人</div>
      <div class="dy-fx-3">负责人电话</div>
      <div class="dy-fx-2">组员数量</div>
      <div class="dy-fx-2 border-l">操作</div>
    </div>

    <div>
      <ul class="wg-list dy-flex border-t global_table_item" v-for="(item, index) in wgData">
        <li class="dy-fx-1">{{(index+1) < 10 ? '0'+(index+1) : '' + (index+1)}}</li>
        <li class="dy-fx-3 ellipsis-1" :title="item.name">{{item.name}}</li>
        <li class="dy-fx-3">{{item.leaderName}}</li>
        <li class="dy-fx-3">{{item.leaderPhone || '--'}}</li>
        <li class="dy-fx-2">{{item.userIds | lot}}</li>
        <li class="dy-fx-2 border-l">
          <a href="javascript:;" class="mr-5" v-if="deleteFlag" @click="delteList(item.id)">删除</a>
          <a href="javascript:;" @click="checkGroup(item.id, item.userIds)">查看</a>
        </li>
      </ul>
    </div>
  </div>

  <div class="user-page ptb-10 clearfix">
    <div class="pull-left user-page-num">
      <span class="font-14">共<i>{{params.totalCount}}</i>条记录</span>
      <span>每页
        <div class="select-ul pagenums">
          <span class="select-name br-4 box-i-shadow">10</span>
          <ul>
            <li v-for="item in page.list" @click="pageSelect(item)">{{item}}</li>
          </ul>
        </div>条
      </span>
    </div>
    <div class="pull-right">
      <hl-pagination v-model="params.currentPage" :total="params.totalPage" @change="getData"></hl-pagination>
    </div>
  </div>

  <div class="wkp-pop box-o-shadow hide pop" style="width:800px;">
    <div class="head">工作组<button class="close wkp-pop-close-btn absolute" @click="hideSelectPerson">×</button></div>
    <div class="content">
      <div class="clearfix ptb-10">
        <div class="pull-left mr-10 clearfix">
          <div class="pull-left line-34 mr-10">工作组名称：</div>
          <input type="text" name="" value="" class="form-control grp-ipt">
        </div>
        <div class="pull-left clearfix">
          <div class="pull-left line-34 mr-10">负责人：</div>
          <div class="fzr-ipt-select">
            <input type="text" name="" value="" class="form-control fzr">
            <ul>

            </ul>
          </div>
        </div>
      </div>
      <div class="clearfix mb-20">
        <div class="member-container">
          <p class="member-list mb-10">可添加组员</p>
          <div class="memeber-list box-i-shadow br-4 border sidebar">
            <div class="main selected-member-list" style="height:437px;">
              <div class="approve-person"></div>
            </div>
          </div>
        </div>

        <div class="selected-member-container">
          <p class="selected-list mb-10">已选组员</p>
          <div class="sidebar box-i-shadow br-4 border">
            <div class="nav dy-flex">
              <div class="dy-fx-2">姓名</div>
              <div class="dy-fx-2">账号</div>
              <div class="dy-fx-2">电话</div>
              <div class="dy-fx-1">操作</div>
            </div>
            <div class="main selected-member-list">
              <div class="have-member">
                <ul class="dy-flex selected-member-item" v-for="(item, index) in nodeUser">
                  <li class="dy-fx-2 name">{{ item.name }}</li>
                  <li class="dy-fx-2">{{ item.account }}</li>
                  <li class="dy-fx-2">{{ item.phone }}</li>
                  <li class="dy-fx-1 delete-member cursor"><span @click="delperson(index)" class="icon-Gm-delete"></span></li>
                </ul>
              </div>
              <div class="no-member" v-if="!nodeUser.length">
                <img src="assets/images/wgp-no-member.png" class="no-member-image" alt="暂无组员图">
                <p>暂无组员,请在左侧添加</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="ptb-10 text-center">
      <hl-button type="primary" class="save-wkp" v-if="!groupId" @on-click="saveCreate">保存</hl-button>
      <hl-button type="primary" class="save-wkp" v-if="groupId" @on-click="saveEdit">保存</hl-button>
      <hl-button type="outline" class="wkp-pop-close-btn" @on-click="hideSelectPerson">取消</hl-button>
    </div>
  </div>
  <div class="backdrop hide"></div>
</section>
<script src="modules/flow/scripts/approve.js" charset="utf-8"></script>
<script src="modules/working_group/scripts/working_group_list.js" charset="utf-8"></script>


<style media="screen">
  /* //审批节点 */
  .approve-person .approve-top {
    height: 50px;
    width: 100%;
    background:rgba(241,241,241,1);
    display: flex;
    text-align: center;
  }
  .approve-person .approve-top .approve-tab {
    flex: 1;
    position: relative;
    line-height: 50px;
  }
  .approve-tab-active {
    color: #565E99;
  }
  .approve-tab-active:before {
    content: '';
    position: absolute;
    bottom: 0;
    width: 60px;
    height: 2px;
    background:rgba(86,94,153,1);
  }
  .approve-node {
    text-align: left;
    padding-left: 15px;
  }
  .node-children-name {
    line-height: 40px;
    height: 40px;
    padding-left: 5px;
  }
  .user-select {
    cursor: pointer;
    width: 16px;
    height: 16px;
    margin-top: 12px;
    border-radius: 4px;
    border: 1px solid #ddd;
    display: inline-block;
    vertical-align: top;
  }
  .user-select-active {
    background-image: url(assets/images/Check.png);
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #5e67a5;
    border-color: #5e67a5;
  }
  .check-auth {
    width: 13px;
    height: 13px;
    position: relative;
    border: 1px solid #666;
    border-radius: 4px;
  }
  .check-auth-active {
    background-image: url(assets/images/Check.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 8px;
    background-color: #5e67a5;
    width: 13px;
    height: 13px;
    border: 1px solid #5e67a5;
    border-radius: 4px;
  }
  .auto-close {
    right: 0;
    top: 0;
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
  }
  .auth-project {
    width: 900px;
    background: #fff;
    border-radius: 6px;
    position: relative;
  }
  .cz-center {
    display: flex;
    justify-content:center;
    align-items:center;
  }
  .mark-auth-project {
    background: rgba(0,0,0,.5);
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    display: flex;
    justify-content:center;
    align-items:center;
  }
</style>
